<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VueDemo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.14/dist/nutui.css">
    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.14/dist/nutui.js"></script>
</head>

<body>
    <div id="app">
        <h3>{{ msg }}</h3>
        <hr>
        <h5>请求参数:</h5>
        <h6>{{query}}</h6>
        <hr>
        <div class="users">
            <nut-cell v-for="(item,i) in users" :key="i" :show-icon="true" :title="item.name" :sub-title="item.county" :desc="item.age + '-' + item.grade">
                <div slot="avatar"><nut-avatar bg-icon :bg-image="item.icon"></nut-avatar></div>
            </nut-cell>
        </div>
    </div>
    <script>
        var vue = new Vue({
            el: '#app',
            data: {
                msg: '',
                users: [],
                query: null
            },
            mounted() {
                this.getList()
            },
            methods: {
                getList() {
                    var vm = this
                    axios.get('http://localhost:3000/api?a=1&b=bbb')
                        .then(function (response) {
                            const res = response.data
                            vm.msg = res.data.msg
                            vm.users = res.data.users
                            vm.query = res.data.query
                        })
                        .catch(function (error) {
                            vm.msg = 'Error! Could not reach the API. ' + error
                        })
                }
            }
        })
    </script>
</body>

</html>